<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<!--缓存设置-->
	<meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
	<!--强制让文档与设备的宽度保持1：1,文档最大的宽度比列是1.0（initial-scale初始刻度值和maximum-scale最大刻度值）,user-scalable定义是否可缩放（0为不缩放），使页面固定设备上面的大小-->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
	<!--网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
	<!--在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<!--使设备浏览网页时对数字不启用电话功能（不同设备解释不同，itouch点击数字为存入联系人，iphone为拨打电话），忽略将页面中的数字识别为电话号码-->
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="adress=no" />
	<!--禁止链接高亮-->
    <meta name="msapplication-tap-highlight" content="no" />

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="../css/progress.css" />
    <title>CSS3加载</title>
</head>
<body>
<!-- (※必须)页面整体框架，用以定义整个网页背景图案、颜色等 -->
<!-- 框架开始 -->
<div class="wrapper">

    <!-- (※必须)页面内容框架，设置页面内容的显示宽度、内容 -->
    <!-- 页面开始 -->
    <div class="page">
        <div class="progress-1">
            <div class="progress-bar">
                <span class="progress-zebra"></span>
            </div>
        </div>

        <div class="progress-2">
            <!-- 进度条 -->
            <div>
                <span></span>
            </div>
            <!-- 五个圆 -->
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

        <div class="progress-3">
            <div class="left"></div>
            <div class="right"></div>
            <div class="progress">85%</div>
        </div>

        <div class="progress-4">
            <div class="left"><div></div></div>
            <div class="right"><div></div></div>
            <div class="progress">75%</div>
        </div>

        <div class="progress-5">
            <div class="wrapper right">
                <div class="circle-progress rightcircle"></div>
            </div>
            <div class="wrapper left">
                <div class="circle-progress leftcircle"></div>
            </div>
        </div>

        <div class="progress-6">
            <div class="pie-left"><div class="left"></div></div>
            <div class="pie-right"><div class="right"></div></div>
            <div class="mask"><span>10</span>%</div>
        </div>

        <div class="progress-7">
            <style type="text/css">
                .ceil {
                    display: inline-block;
                    padding: 10px;
                    margin-right: 10px;
                }
            </style>
            <!--第一组 start-->
            <span class="ceil">
                <div class="loader duration-500ms-before">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>default</strong>
            </span>
            <span class="ceil">
                <div class="loader loader-red duration-1s-before">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>red</strong>
            </span>
            <span class="ceil">
                <div class="loader loader-gray duration-2s-before">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>gray</strong>
            </span>
            <span class="ceil">
                <div class="loader loader-green duration-3s-before">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>green</strong>
            </span>
            <span class="ceil">
                <div class="loader loader-orange duration-4s-before">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>orange</strong>
            </span>


            <!--第一组 end-->

            <!--第二组 start-->
            <span class="ceil">
                <div class="loader loader2 duration-500ms-before">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader2</strong>
            </span>
            <span class="ceil">
                <div class="loader loader2 loader2-red  duration-1s-before">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader2</strong>
            </span>
            <span class="ceil">
                <div class="loader loader2 loader2-gray duration-2s-before">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader2</strong>
            </span>
            <span class="ceil">
                <div class="loader loader2 loader2-green duration-3s-before">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader2</strong>
            </span>
            <span class="ceil">
                <div class="loader loader2 loader2-orange duration-4s-before">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader2</strong>
            </span>

            <!--第二组 end-->

            <!--第三组 start-->
            <span class="ceil">
                <div class="loader loader3 duration-500ms-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader3</strong>
            </span>

            <span class="ceil">
                <div class="loader loader3 loader3-red duration-2s-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader3</strong>
            </span>

            <span class="ceil">
                <div class="loader loader3 loader3-gray duration-3s-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader3</strong>
            </span>

            <span class="ceil">
                <div class="loader loader3 loader3-green duration-4s-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader3</strong>
            </span>

            <span class="ceil">
                <div class="loader loader3 loader3-orange duration-5s-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader3</strong>
            </span>

            <!--第三组 end-->


            <!--第四组 start-->
            <span class="ceil">
                <div class="loader loader4 duration-500ms-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader4</strong>
            </span>

            <span class="ceil">
                <div class="loader loader4 loader4-red duration-1s-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader4</strong>
            </span>

            <span class="ceil">
                <div class="loader loader4 loader4-gray duration-2s-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader4</strong>
            </span>

            <span class="ceil">
                <div class="loader loader4 loader4-green duration-3s-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader4</strong>
            </span>

            <span class="ceil">
                <div class="loader loader4 loader4-orange duration-4s-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader4</strong>
            </span>


            <!--第四组 end-->

            <!--第五组 start-->
            <span class="ceil">
                <div class="loader loader5 duration-500ms-after">
                    <div class="main"></div>
                    <div class="pointer duration-500ms"></div>
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader5</strong>
            </span>

            <span class="ceil">
                <div class="loader loader5 loader5-red duration-1s-after">
                    <div class="main"></div>
                    <div class="pointer duration-1s"></div>
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader5</strong>
            </span>

            <span class="ceil">
                <div class="loader loader5 loader5-gray duration-2s-after">
                    <div class="main"></div>
                    <div class="pointer duration-2s"></div>
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader5</strong>
            </span>

            <span class="ceil">
                <div class="loader loader5 loader5-green duration-3s-after">
                    <div class="main"></div>
                    <div class="pointer duration-3s"></div>
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader5</strong>
            </span>

            <span class="ceil">
                <div class="loader loader5 loader5-orange duration-4s-after">
                    <a href="javascript:;">100%</a>
                </div>
                <strong>loader5</strong>
            </span>
            <!--第五组 end-->
        </div>
    </div>
    <!-- 页面结束 -->

</div>
<!-- 框架结束 -->
</body>
</html>
